
<template>
	<view class="root height-100vh">
		<view class="main relative">
			<image
				class="absolute width-100percent height-100percent"
				src="/static/imgs/bg-welcome.png"
			/>
			<view :style="{ zIndex: 1 }">
				<view class="input-container bgc-fff ml-60 mr-60 br-10">
					<view class="tel fd-row ai-center">
						<text class="fs-30 prefix">+86</text>
						<input
							class="input fs-28 f1"
							v-model="model.tel"
							type="number"
							maxlength="11"
							placeholder-class="color-abbcd7"
							placeholder="请输入手机号"
						/>
					</view>
					<view class="height-2 bgc-eb opacity-06" />
					<view class="code fd-row ai-center">
						<input
							class="input fs-28 f1"
							v-model="model.code"
							type="number"
							maxlength="6"
							placeholder-class="color-abbcd7"
							placeholder="请输入验证码"
						/>
						<view
							@click="getCode"
							hover-class="btn-hover"
							:style="{ color: tips.exc ? '#ccc' : '#4388e7' }"
							:class="['fs-24', 'code-btn']"
							>{{ tips.text }}</view
						>
					</view>
				</view>
				<view class="ai-end login mr-18">
					<image
						@click="login"
						class="icon-next"
						src="/static/imgs/icon-next.png"
					/>
				</view>
			</view>
		</view>

		<view class="footer fd-row absolute bottom-44 width-100vw jc-center">
			<view class="fd-row fs-22 ai-center color-8f9aa8">
				<label class="fd-row ai-center">
					<switch
						type="checkbox"
						:checked="isAgree"
						@change="changeCheckbox"
						color="#fff"
					/>
					<text>我已阅读并同意</text>
				</label>
				<navigator
					:url="`/pages/webview?url=${encodeURIComponent(
						SERVER_URL + '/protocol.html'
					)}`"
					hover-class="btn-hover"
					class="color-5482bd"
				>
					《用户服务协议》
				</navigator>
				<text>和</text>
				<navigator
					:url="`/pages/webview?url=${encodeURIComponent(
						SERVER_URL + '/private.html'
					)}`"
					hover-class="btn-hover"
					class="color-5482bd"
				>
					《隐私政策》
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import { homePage } from "../static/js/config";
	export default {
		data: () => ({
			model: {
				tel: "",
				code: "",
			},
			tips: { text: "发送验证码", exc: false, count: 60 },
			isAgree: false,
			SERVER_URL: uni.REQUEST_URL,
		}),
		methods: {
			countDown() {
				let tips = this.tips,
					count,
					timer;
				tips.exc = true;
				tips.text = `${tips.count}s后重试`;
				count = tips.count;
				timer = setInterval((_) => {
					count--;
					tips.text = `${count}s后重试`;
					if (!count) {
						tips.text = `发送验证码`;
						tips.exc = false;
						count = tips.count;
						clearInterval(timer);
					}
				}, 1000);
			},
			login() {
				let title;
				switch (false) {
					case this.isAgree:
						title = "您还没有同意相关协议与政策";
						break;
					case uni.isPhoneNumber(this.model.tel):
						title = "你的手机号输入有误";
						break;
					case Boolean(this.model.code):
						title = "你还没有输入验证码";
						break;
					default:
						uni.showLoading({ title: "signing in...", mask: true });

						let cid;
						// #ifdef APP-PLUS
						cid = plus.push.getClientInfo().clientid;
						// #endif
						uni.fetch("/api/login/index", {
							data: {
								mobile: this.model.tel,
								code: this.model.code,
								role: 1,
								cid,
							},
							success: (res) => {
								uni.setStorageSync("userInfo", res);
								uni.reLaunch({
									url: homePage,
									success: uni.hideLoading,
								});
							},
						});
						break;
				}
				title && uni.showToast({ title, icon: "none" });
			},
			getCode() {
				if (this.tips.exc) return;
				uni.isPhoneNumber(this.model.tel)
					? (this.countDown(),
					  uni.fetch("/api/login/sendsms", {
							data: { mobile: this.model.tel },
							success: (res) => uni.showToast({ title: "发送成功" }),
					  }))
					: uni.showToast({
							title: "请输入一个正确的手机号",
							icon: "none",
					  });
			},
			changeCheckbox(e) {
				this.isAgree = e.detail.value;
			},
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep {
		switch {
			transform: scale(0.6);
			.wx-checkbox-input,
			.uni-checkbox-input {
				border-color: #0d81f6;
				background-color: transparent;
			}

			.wx-checkbox-input.wx-checkbox-input-checked,
			.uni-checkbox-input.uni-checkbox-input-checked {
				background-color: #0d81f6;
			}

			&:not([disabled]) {
				.wx-checkbox-input:hover,
				.uni-checkbox-input:hover {
					border-color: #0d81f6;
				}
			}
		}
	}
	.main {
		height: 900rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.input-container {
		margin-top: 400rpx;
	}

	.input {
		padding: 33rpx 25rpx;
	}

	.prefix {
		padding: 0 25rpx;
		border-right: 1rpx solid #e0e0e0;
	}

	.code-btn {
		padding: 25rpx;
	}

	.login {
		margin-top: 133rpx;
	}

	.icon-next {
		width: 163rpx;
		height: 162rpx;
	}
</style>
